<template>
  <div class="failureRate-analysis-container">
    <div class="search-bar">
      <div>
        <span class="label">时间范围</span>
        <el-date-picker
          v-model="queryParams.month"
          type="monthrange"
          align="right"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="yyyy-MM"
          format="yyyy-MM"
          :picker-options="pickerOptions"
          :clearable="false"
          size="small"
        >
        </el-date-picker>
      </div>
      <div>
        <span class="label">品类</span>
        <el-select
          v-model="queryParams.itemCategory"
          size="small"
          placeholder="请选择"
        >
          <el-option
            v-for="item in itemCategoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <span class="label">品种</span>
        <el-select
          v-model="queryParams.itemVariety"
          size="small"
          placeholder="请选择"
        >
          <el-option
            v-for="item in itemVarietyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <span class="label">品项</span>
        <el-select
          v-model="queryParams.itemAppearance"
          size="small"
          placeholder="请选择"
        >
          <el-option
            v-for="item in itemAppearanceOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" size="small" @click="handleSearchClick"
          >查询</el-button
        >
      </div>
    </div>
    <div class="item-container">
      <SummaryContent
        :queryParams="summarySearchParams"
        @after-init-chart="handleAfterSummaryInitChart"
        @series-line-click="handleSummaryLineClick"
      ></SummaryContent>
    </div>
    <div class="item-container">
      <MonthlyContent
        :queryParams="monthlySearchParams"
        @after-init-chart="handleAfterMonthlyInitChart"
        @series-line-click="handleMonthlyLineClick"
      ></MonthlyContent>
    </div>
    <div class="item-container">
      <DailyContent
        :queryParams="dailySearchParams"
        @after-init-chart="handleAfterDailyInitChart"
        @series-line-click="handleDailyLineClick"
      ></DailyContent>
    </div>
    <div class="item-container">
      <DailyDetail :queryParams="dailyDetailSearchParams"></DailyDetail>
    </div>
  </div>
</template>
<script>
import pickerOptions from "@/views/reportMgmt/reportForms/components/pickerOptions";
import SummaryContent from "./summary/index";
import MonthlyContent from "./monthly/index";
import DailyContent from "./daily/index";
import DailyDetail from "./dailyDetail/index";
import { getProductDict } from "@/api/reportFormAnalysis/failureRate";
export default {
  name: "FailureRateAnalysis",
  components: { SummaryContent, MonthlyContent, DailyContent, DailyDetail },
  dicts: [
    "produceLineType",
    "produceLineCategoryPURE",
    "produceLineCategoryBEVERAGE",
  ],
  data() {
    return {
      // 顶部筛选条件
      queryParams: {
        month: [], //默认本月
        itemCategory: "",
        itemVariety: "",
        itemAppearance: "",
      },
      pickerOptions,
      // 品类筛选下拉框
      itemCategoryOptions: [],
      // 品类筛选下拉框
      itemVarietyOptions: [],
      // 品相筛选下拉框
      itemAppearanceOptions: [],
      // 累计生产效率&产线故障率的过滤条件
      summarySearchParams: {
        startMonth: null,
        endMonth: null,
        itemCategory: null,
        itemVariety: null,
        itemAppearance: null,
      },
      // 月度生产效率&产线故障率的过滤条件
      monthlySearchParams: {
        startMonth: null,
        endMonth: null,
        itemCategory: null,
        itemVariety: null,
        itemAppearance: null,
        factoryDeptName: null,
        lineName: null,
        serieData: null,
      },
      // 每日生产效率&产线故障率的过滤条件
      dailySearchParams: {
        produceMonth: null,
        itemCategory: null,
        itemVariety: null,
        itemAppearance: null,
        factoryDeptName: null,
        lineName: null,
        serieData: null,
      },
      // 每日生产时长 & 设备故障停机情况的过滤条件
      dailyDetailSearchParams: {
        produceDate: null,
        itemCategory: null,
        itemVariety: null,
        itemAppearance: null,
        factoryDeptName: null,
        lineName: null,
      },
      // 月度、每日的数据默认显示的条件
      defaultParams: null,
    };
  },
  beforeRouteEnter(to, from, next) {
    const params = to.params;
    next((vm) => {
      if (params && !!Object.keys(params).length) {
        vm.defaultParams = params;

        const month = vm.parseTime(new Date(params.produceDate), "{y}-{m}");
        vm.queryParams.month = [month, month];
      } else {
        vm.defaultParams = null;

        // 设置时间范围默认筛选条件：今年至今
        const startDate = vm.parseTime(new Date(), "{y}-01");
        const currentDate = vm.parseTime(new Date(), "{y}-{m}");
        vm.queryParams.month = [startDate, currentDate];
      }
    });
  },
  created() {
    this.getSearchOption();
  },
  deactivated() {
    this.clearDefaultParams();
  },
  beforeDestroy() {
    this.clearDefaultParams();
  },
  methods: {
    // 查询条件下拉框
    async getSearchOption() {
      try {
        const res = await getProductDict();
        const { itemCategorys, itemVarietys, itemAppearances } = res.data;

        this.itemCategoryOptions = itemCategorys.map((ele) => ({
          value: ele,
          label: ele,
        }));
        this.itemVarietyOptions = itemVarietys.map((ele) => ({
          value: ele,
          label: ele,
        }));
        this.itemAppearanceOptions = itemAppearances.map((ele) => ({
          value: ele,
          label: ele,
        }));
        // 默认值
        this.queryParams.itemCategory = itemCategorys[0];
        this.queryParams.itemVariety = itemVarietys[0];
        this.queryParams.itemAppearance = itemAppearances[0];
      } catch (error) {
        this.itemCategoryOptions = [];
        this.itemVarietyOptions = [];
        this.itemAppearanceOptions = [];
        // 默认值
        this.queryParams.itemCategory = "";
        this.queryParams.itemVariety = "";
        this.queryParams.itemAppearance = "";
      }

      this.handleSearch();
    },
    handleSearchClick() {
      this.clearDefaultParams();

      this.handleSearch();
    },
    // 搜索查询
    handleSearch() {
      const { month, itemCategory, itemVariety, itemAppearance } =
        this.queryParams;

      if (!month?.length || !itemCategory || !itemVariety || !itemAppearance) {
        this.msgWarning("请选择筛选条件！");
        return;
      }

      this.summarySearchParams = {
        startMonth: month[0],
        endMonth: month[1],
        itemCategory,
        itemVariety,
        itemAppearance,
      };
    },
    // 累计图表初始化完毕
    handleAfterSummaryInitChart(option) {
      if (option.series[0].data.length > 0) {
        const { month, itemCategory, itemVariety, itemAppearance } =
          this.queryParams;

        if (
          !month?.length ||
          !itemCategory ||
          !itemVariety ||
          !itemAppearance
        ) {
          this.msgWarning("请选择筛选条件！");
          return;
        }

        this.monthlySearchParams = {
          startMonth: month[0],
          endMonth: month[1],
          itemCategory,
          itemVariety,
          itemAppearance,
          factoryDeptName:
            this.defaultParams?.factoryDeptName ||
            option.series[0].data[0].factoryDeptName,
          lineName:
            this.defaultParams?.lineName || option.series[0].data[0].lineName,
          serieData: [option.series[0].data[0], option.series[1].data[0]],
        };
      }
    },
    // 点击累计图表的线
    handleSummaryLineClick(e, option) {
      this.clearDefaultParams();

      this.monthlySearchParams.factoryDeptName = e.data.factoryDeptName;
      this.monthlySearchParams.lineName = e.data.lineName;
      this.monthlySearchParams.serieData = [
        option.series[0].data[e.dataIndex],
        option.series[1].data[e.dataIndex],
      ];
    },
    // 月度图表初始化完毕
    handleAfterMonthlyInitChart(option) {
      if (option.series[0].data.length > 0) {
        const { month, itemCategory, itemVariety, itemAppearance } =
          this.queryParams;

        if (
          !month?.length ||
          !itemCategory ||
          !itemVariety ||
          !itemAppearance
        ) {
          this.msgWarning("请选择筛选条件！");
          return;
        }

        this.dailySearchParams = {
          produceMonth:
            this.defaultParams?.produceDate?.slice(0, 7) ||
            option.xAxis.data[0].produceMonth,
          itemCategory,
          itemVariety,
          itemAppearance,
          factoryDeptName:
            this.defaultParams?.factoryDeptName ||
            option.series[0].data[0].factoryDeptName,
          lineName:
            this.defaultParams?.lineName || option.series[0].data[0].lineName,
          serieData: [option.series[0].data[0], option.series[1].data[0]],
        };
      }
    },
    // 点击月度图表的线
    handleMonthlyLineClick(e, option) {
      this.clearDefaultParams();

      this.dailySearchParams.produceMonth = e.data.produceMonth;
      this.dailySearchParams.factoryDeptName = e.data.factoryDeptName;
      this.dailySearchParams.lineName = e.data.lineName;
      this.dailySearchParams.serieData = [
        option.series[0].data[e.dataIndex],
        option.series[1].data[e.dataIndex],
      ];
    },
    // 日度图表初始化完毕
    handleAfterDailyInitChart(option) {
      if (option.series[0].data.length > 0) {
        const { month, itemCategory, itemVariety, itemAppearance } =
          this.queryParams;

        if (
          !month?.length ||
          !itemCategory ||
          !itemVariety ||
          !itemAppearance
        ) {
          this.msgWarning("请选择筛选条件！");
          return;
        }

        this.dailyDetailSearchParams = {
          produceDate:
            this.defaultParams?.produceDate || option.xAxis.data[0].produceDate,
          itemCategory,
          itemVariety,
          itemAppearance,
          factoryDeptName:
            this.defaultParams?.factoryDeptName ||
            option.series[0].data[0].factoryDeptName,
          lineName:
            this.defaultParams?.lineName || option.series[0].data[0].lineName,
        };
      }
    },
    // 点击日度图表的线
    handleDailyLineClick(e) {
      this.clearDefaultParams();

      this.dailyDetailSearchParams.produceDate = e.data.produceDate;
      this.dailyDetailSearchParams.factoryDeptName = e.data.factoryDeptName;
      this.dailyDetailSearchParams.lineName = e.data.lineName;
    },
    clearDefaultParams() {
      this.defaultParams = null;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/element-variables.scss";
.search-bar {
  padding: 16px 20px;
  margin-bottom: 16px;
  border-radius: 2px;
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #ffffff;
  .label {
    margin-right: 8px;
    font-size: 15px;
  }
}
.item-container {
  width: 100%;
  height: 350px;
  padding: 16px 20px;
  margin-bottom: 16px;
  border-radius: 2px;
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}
// 重写组件样式
::v-deep {
  .block-title {
    margin-bottom: 16px;
    .title.line {
      color: $--color-primary;
      &::before {
        background-color: $--color-primary;
      }
    }
    .title-sub {
      margin-left: 12px;
      color: #313131;
      &-active {
        color: $--color-primary;
      }
      &-desc {
        margin-left: 8px;
        font-size: 13px;
        font-weight: normal;
        color: #9f9f9f;
      }
    }
  }
  .custom-table-container {
    font-size: 13px;
    th {
      .cell {
        font-size: 12px;
        font-weight: 600;
        color: #424656;
        .filter-icon {
          font-size: 12px;
        }
      }
    }
    .filter-icon {
      display: none;
    }
    .cell.warning-color {
      color: red;
    }
    .cell.pass-color {
      color: green;
    }
  }
}
</style>
